<template>
	<!-- 鸿翔3 -->
	<div class="canvasbox">
		<canvas id="mycanvas" class="mycanvas"></canvas>
		<img @load="getDraw" src="../../assets/bg.png" alt="" id="img" style="display: none;" />

	</div>
</template>

<script>
	export default {

		data() {
			return {
				ctx: null,
				mycanvas: null,
				imageurl: '../../assets/bg.jpg',
				inputList: [{
						key: 'sd',
						x: 155,
						y: 185,
						text: '55.5A',
						unit: 'A'
					},
					{
						key: 'jy',
						x: 103,
						y: 100,
						text: '55.5A',
						unit: 'A'
					},
					{
						key: 'sd_I',
						x: 227,
						y: 56,
						text: '55.5A',
						unit: 'A'
					},
					{
						key: 'tlt_I',
						x: 222,
						y: 320,
						text: '55.5A',
						unit: 'A'
					},
					{
						key: 'jwt_lq',
						x: 235,
						y: 435,
						text: '55.5A',
						unit: 'A'
					},
					{
						key: 'tlt_I',
						x: 95,
						y: 468,
						text: '77A',
						unit: 'A'
					},
					{
						key: 'tlt_I1',
						x: 155,
						y: 556,
						text: '55.5A',
						unit: 'A'
					},
					{
						key: 'jwt_lq',
						x: 223,
						y: 690,
						text: '55.5A',
						unit: 'A'
					},
					{
						key: 'jy_xhb_C',
						x: 602,
						y: 105,
						text: '888.8℃',
						unit: '℃'
					},
					{
						key: 'jy_xhb_B_A',
						x: 1010,
						y: 165,
						text: '55.5A',
						unit: 'A'
					},
					{
						key: 'jy_xhb_A_A',
						x: 1050,
						y: 260,
						text: '15.188m',
						unit: 'm'
					},
					{
						key: 'jy_pH',
						x: 865,
						y: 330,
						text: '55.5A',
						unit: 'A'
					},
					{
						key: 'jy_',
						x: 1190,
						y: 325,
						text: '54A',
						unit: 'A'
					},

					{
						key: 'KELI',
						x: 1200,
						y: 380,
						text: '8888Kg',
						unit: 'Kg'
					},
					{
						key: 'NH3',
						x: 880,
						y: 380,
						text: '8888Kg',
						unit: 'Kg'
					},
					{
						key: 'jh1',
						x: 820,
						y: 770,
						text: '55A',
						unit: 'A'
					},
					{
						key: 'jh2',
						x: 905,
						y: 790,
						text: '55A',
						unit: 'A'
					},
					{
						key: 'jh3',
						x: 978,
						y: 815,
						text: '55A',
						unit: 'A'
					},
					{
						key: 'jh4',
						x: 1140,
						y: 855,
						text: '55A',
						unit: 'A'
					},
					{
						key: 'jh5',
						x: 1218,
						y: 878,
						text: '55A',
						unit: 'A'
					},
					{
						key: 'jh6',
						x: 1290,
						y: 900,
						text: '55A',
						unit: 'A'
					},

					{
						key: 'jh7',
						x: 1530,
						y: 38,
						text: '55A',
						unit: 'A'
					},
					{
						key: 'jh8',
						x: 1475,
						y: 145,
						text: '88A',
						unit: 'A',


					},
					{
						key: 'jh9',
						x: 1599,
						y: 365,
						text: '55.5A',
						unit: 'A'

					},
					{
						key: 'jh10',
						x: 1630,
						y: 505,
						text: '55.5A',
						unit: 'A'

					},
					{
						key: 'jh11',
						x: 1565,
						y: 615,
						text: '55.5A',
						unit: 'A'

					},
					{
						key: 'jh12',
						x: 1565,
						y: 615,
						text: '55.5A',
						unit: 'A'

					},
					{
						key: 'jh13',
						x: 1575,
						y: 725,
						text: '55.5A',
						unit: 'A'

					},
					{
						key: 'jh14',
						x: 1790,
						y: 725,
						text: '55.5A',
						unit: 'A'

					},
					{
						key: 'jh15',
						x: 290,
						y: 921,
						text: '55.5%',
						unit: '%'

					},
					{
						key: 'jh16',
						x: 290,
						y: 941,
						text: '8.88 t/h',
						unit: 't/h'

					},
					{
						key: 'jh17',
						x: 290,
						y: 961,
						text: '8.88 m/s',
						unit: 'm/s'
					},
					{
						key: 'jh18',
						x: 390,
						y: 921,
						text: '55.5%',
						unit: '%'

					},
					{
						key: 'jh19',
						x: 390,
						y: 941,
						text: '8.88 t/h',
						unit: 't/h'

					},
					{
						key: 'jh20',
						x: 390,
						y: 961,
						text: '8.88 m/s',
						unit: 'm/s'
					},
					{
						key: 'jh21',
						x: 490,
						y: 921,
						text: '55.5%',
						unit: '%'

					},
					{
						key: 'jh22',
						x: 490,
						y: 941,
						text: '8.88 t/h',
						unit: 't/h'

					},
					{
						key: 'jh23',
						x: 490,
						y: 961,
						text: '8.88 m/s',
						unit: 'm/s'
					},
					{
						key: 'jh24',
						x: 590,
						y: 921,
						text: '55.5%',
						unit: '%'

					},
					{
						key: 'jh25',
						x: 590,
						y: 941,
						text: '8.88 t/h',
						unit: 't/h'

					},
					{
						key: 'jh26',
						x: 590,
						y: 961,
						text: '8.88 m/s',
						unit: 'm/s'
					},
					{
						key: 'jh27',
						x: 690,
						y: 921,
						text: '55.5%',
						unit: '%'

					},
					{
						key: 'jh28',
						x: 690,
						y: 941,
						text: '8.88 t/h',
						unit: 't/h'

					},
					{
						key: 'jh29',
						x: 690,
						y: 961,
						text: '8.88 m/s',
						unit: 'm/s'
					}



				],
				windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
				windowHeight: document.documentElement.clientHeight, //实时屏幕高度
				tableId: 1,
				timer: null,

			}
		},
		created() {},
		mounted() {
			var that = this;

			window.onresize = () => {
				return (() => {
					window.fullHeight = document.documentElement.clientHeight;
					window.fullWidth = document.documentElement.clientWidth;
					that.windowHeight = window.fullHeight; // 高
					that.windowWidth = window.fullWidth; // 宽

				})()
			};

			this.mycanvas = document.getElementById('mycanvas');
			this.ctx = mycanvas.getContext('2d')
			this.getDraw()
			// this.getList(this.tableId)
			// this.getList(2)
			// this.setTimers()
			window.addEventListener('keydown', this.handleKeyboard);
		},
		beforeDestroy() {
			window.removeEventListener('keydown', this.handleKeyboard);
		},
		watch: {
			windowHeight(val) {
				let that = this;
				console.log("实时屏幕高度：", val, that.windowHeight);

			},
			windowWidth(val) {
				let that = this;
				console.log("实时屏幕宽度：", val, that.windowHeight);
			}
		},
		methods: {
			// 监听
			handleKeyboard(event) {
				console.log('2222')
				if (event.key === 'F11') {
					// 在这里处理F11键的按下事件
					window.location.reload();
				}
			},
			// 定时器
			setTimers() {
				this.timer = setInterval(() => {
					this.getList(this.tableId)
					this.getList(2)
				}, 1000 * 2)
				this.$once('hook:beforeDestroy', () => {
					clearInterval(this.timer)
				})
			},
			async getList(tableId) {
				try {
					const res = await this.$request.getList({
						tableId: tableId
					})
					if (res.data.code === 200) {
						for (let key in res.data.result) {
							this.inputList.map((item, index) => {
								if (key === item.key) {
									if (res.data.result[key]) {
										item.text = `${res.data.result[key]} ${item.unit}`
									}

								}
								if (item.key && item.text === '') {
									item.text = `0 ${item.unit}`
								}

							})
						}

						this.getDraw()
					} else {
						this.$message({
							type: 'success',
							message: res.data.message
						})
						clearInterval(this.timer)
					}

				} catch (err) {
					console.log('err', err)
				}
			},


			getDraw() {
				var img = document.getElementById("img");
				this.mycanvas.width = this.windowWidth
				this.mycanvas.height = this.windowHeight

				// this.mycanvas.width = img.width
				// this.mycanvas.height = img.height

				this.ctx.drawImage(img, 0, 0)
				this.drawInput()
			},

			drawInput() {
				for (var i = 0; i < this.inputList.length; i++) {
					var x = this.inputList[i].x;
					var y = this.inputList[i].y
					var text = this.inputList[i].text
					this.ctx.font = "10px Arial";
					this.ctx.fillStyle = "#00ff76"
					this.ctx.fillText(text, x, y);
					this.ctx.save();
					this.ctx.restore();

				}
			}
		}
	}
</script>

<style lang="scss">
	.canvasbox {
		width: 100%;
		position: relative;


		.mycanvas {
			display: block;
			min-height: 100vh;
			width: 100vw;
		}
	}

	@media screen and (max-width: 890px) {

		.canvasbox {
			width: 890px;
		}
	}
</style>